<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vanna.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@350&display=swap" rel="stylesheet">
    <script src="https://cdn.plot.ly/plotly-latest.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <title>Vanna.AI</title>
    <link rel="stylesheet" href="/assets/index-vanna.css">
  </head>
  <body class="bg-white dark:bg-slate-900">
    <div id="app">
      <!-- Main App Container -->
      <main>
        <!-- Sidebar -->
        <div id="application-sidebar" class="hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-gray-200 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:scrollbar-y dark:bg-slate-900 dark:border-gray-700">
          <div class="hs-accordion-group w-full h-full flex flex-col" data-hs-accordion-always-open>
            <div class="flex items-center justify-between py-4 pr-4 pl-7">
              <img class="w-28 h-auto" src="https://img.vanna.ai/vanna-flask.svg" alt="Vanna Logo"/>
              <div class="lg:hidden">
                <button type="button" class="w-8 h-8 inline-flex justify-center items-center gap-2 rounded-md text-gray-700 align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all dark:text-gray-400 dark:focus:ring-offset-gray-800" data-hs-overlay="#application-sidebar" aria-controls="application-sidebar" aria-label="Toggle navigation">
                  <svg class="w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"></path>
                  </svg>
                  <span class="sr-only">Sidebar</span>
                </button>
              </div>
            </div>
            <div class="h-full">
              <ul class="space-y-1.5 p-4">
                <li>
                  <button id="training-data-btn" class="sidebar-nav-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V9H3V2a1 1 0 0 1 1-1h5.5v2zM3 12v-2h10v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/>
                    </svg>
                    Training Data
                  </button>
                </li>
                <li>
                  <button id="new-question-btn" class="sidebar-nav-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/>
                    </svg>
                    New question
                  </button>
                </li>
                <!-- Question History Section with proper scrolling -->
                <li class="question-history-container flex-grow overflow-hidden">
                  <div class="text-xs text-gray-500 uppercase mb-2 px-3 dark:text-gray-400">History</div>
                  <div id="question-history" class="flex-grow">
                    <!-- Question history items will be populated here -->
                  </div>
                </li>
              </ul>
            </div>
            <div class="mt-auto">
              <div class="sidebar-bottom">
                <div class="connection-status">
                  <span class="connection-status-dot"></span>
                  Connected
                </div>
                <a class="sidebar-nav-item mt-2" href="#replace">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
                    <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
                  </svg>
                  Sign out
                </a>
              </div>
            </div>
          </div>
        </div>
        <!-- End Sidebar -->

        <!-- Content Area -->
        <div id="content-area" class="relative h-screen w-full lg:pl-64">
          <!-- Chat Area -->
          <div id="chat-area" class="py-10 lg:py-14">
            <!-- Welcome screen -->
            <div id="welcome-screen" class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto text-center">
              <h1 class="text-3xl font-bold text-gray-800 sm:text-4xl dark:text-white">Welcome to <span class="nav-title">Vanna.AI</span></h1>
              <p class="mt-3 text-gray-600 dark:text-gray-400">Your AI-powered copilot for SQL queries.</p>
            </div>

            <!-- Messages will be displayed here -->
            <div id="message-container">
              <!-- Messages will be added here dynamically -->
            </div>

            <!-- Suggested Questions -->
            <div id="suggested-questions" class="max-w-4xl px-4 py-4 sm:px-6 lg:px-8 mx-auto flex flex-wrap gap-2 justify-center hidden">
              <!-- Suggested questions will be added here -->
            </div>

            <!-- Input Area -->
            <div id="input-area" class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto mt-6">
              <div class="input-container">
                <input id="question-input" type="text" class="form-control" placeholder="Ask me a question about your data that I can turn into SQL." aria-label="Question input">
                <div class="input-actions">
                  <button id="send-button" type="button" aria-label="Send question">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- End Chat Area -->

          <!-- Training Data Area -->
          <div id="training-data-area" class="hidden">
            <!-- Training data content will be loaded here -->
          </div>
        </div>
        <!-- End Content Area -->
      </main>
    </div>

    <script src="/assets/index-vanna.js"></script>
  </body>
</html> 